<template>
  <!-- 医生工作台 -->
  <section>
    <div class="flex-header">
      <div>
        <div class="left-statistics">
          <div @click="onToUrl('/page/reservecentre',0)" class="p-sm">
            <table border="0" width="100%">
              <tr>
                <td width="80">
                  <i class="el-icon-s-custom" style="font-size:60px;"></i>
                </td>
                <td>
                  <p>今日就诊概况</p>
                  <br />
                  <h2 style="margin:0;">总人数：{{registerCount.allRegisterCount}}</h2>
                </td>
              </tr>
            </table>
            <br />
            <table border="0" width="100%" style="text-align:center;">
              <tr>
                <td>
                  <p>未到诊</p>
                  <h3 style="margin:0;">{{registerCount.weiDaoZhenrNum}}</h3>
                </td>
                <td>
                  <p>已到诊</p>
                  <h3 style="margin:0;">{{registerCount.yiDaoZhenrNum}}</h3>
                </td>
                <td>
                  <p>就诊中</p>
                  <h3 style="margin:0;">{{registerCount.jiuZhenZhongrNum}}</h3>
                </td>
                <td>
                  <p>已完成</p>
                  <h3 style="margin:0;">{{registerCount.yiWanChen}}</h3>
                </td>
                <td>
                  <p>已失约</p>
                  <h3 style="margin:0;">{{registerCount.shiYueNum}}</h3>
                </td>
              </tr>
            </table>
          </div>
          <div @click="onToUrl('/page/register',1)" class="p-sm">
            <table border="0" width="100%">
              <tr>
                <td width="80">
                  <i class="iconfont icontuandui-tianchong" style="font-size:50px;"></i>
                </td>
                <td>
                  <p>患者库</p>
                  <br />
                  <h2 style="margin:0;">患者信息</h2>
                </td>
              </tr>
            </table>
            <br />
            <table border="0" width="100%" style="text-align:center;">
              <tr>
                <td width="50%">
                  <p>登记数量</p>
                  <h3 style="margin:0;">{{registerCount.downLineNum}}</h3>
                </td>
                <td>
                  <p>预约数量</p>
                  <h3 style="margin:0;">{{registerCount.registerNum}}</h3>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div style="text-align:center;">
        <h4>
          <i class="vertical-middle el-icon-user-solid"></i>
          <span class="vertical-middle">患者查询</span>
        </h4>
        <br />
        <div>
          <el-input placeholder="患者姓名" v-model="patientName">
            <div slot="append">
              <el-button @click="onOpenPatient">
                <i class="el-icon-search"></i>
              </el-button>
            </div>
          </el-input>
        </div>
      </div>
    </div>
    <br />
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" style="margin-top:20px">
        <h4 style="margin:0;line-height:45px;">排班信息</h4>
        <br />
        <el-form :inline="true" @submit.native.prevent="onSearchDoctor">
          <el-form-item>
            <deptSearch v-model="form.deptId" @change="onChangeDept"></deptSearch>
          </el-form-item>
          <el-form-item>
            <doctorSearch
              ref="doctorSearch"
              v-model="form.doctorId"
              :deptId="form.deptId"
              :keyword="form.doctorName"
            ></doctorSearch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" native-type="submit" circle icon="el-icon-search"></el-button>
          </el-form-item>
        </el-form>
        <div>
          <el-button-group class="vertical-middle">
            <el-button @click="onStepWeek(0)">
              <i class="el-icon-arrow-left"></i>
              <span>上周</span>
            </el-button>
            <el-button @click="onStepWeek(1)">
              <span>下周</span>
              <i class="el-icon-arrow-right"></i>
            </el-button>
          </el-button-group>
        </div>
        <br />
        <table class="grid-table">
          <thead>
            <tr>
              <th>日期</th>
              <th>排班</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in paiBanObj.weekArray" :Key="index">
              <td style="width:40%;">{{item.week}} {{item.dateDay}}    {{index}}</td>
              <td>
                <!-- {{paiBanObj.tableList[0].scheduleDoctors[index]}} -->
                <span
                  v-if="paiBanObj.tableList[0].scheduleDoctors[index].typeTitle"
                >{{paiBanObj.tableList[0].scheduleDoctors[index].typeTitle}}；余号：{{paiBanObj.tableList[0].scheduleDoctors[index].remainSource}}</span>
              </td>
            </tr>
            <template v-if="paiBanObj.weekArray.length==0">
              <tr v-for="(item,index) in weekArray" :Key="index">
                <td>周{{item}}</td>
                <td></td>
              </tr>
            </template>
          </tbody>
        </table>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16" style="margin-top:20px">
        <table border="0" width="100%">
          <tr>
            <td width="250">
              <h4 style="margin:0;">预约信息</h4>
            </td>
            <td style="text-align:center;">
              <h3 style="margin:0;">{{curyyDate|curDateStr}}</h3>
            </td>
            <td style="text-align:right;" width="250">
              <el-button-group class="vertical-middle">
                <el-button @click="onStepMonth(0)">
                  <i class="el-icon-arrow-left"></i>
                  <span>上月</span>
                </el-button>
                <el-button @click="onStepMonth(1)">
                  <span>下月</span>
                  <i class="el-icon-arrow-right"></i>
                </el-button>
              </el-button-group>
            </td>
          </tr>
        </table>
        <br />
        <br />
        <reserveCalendar :form="form" :curDate="curyyDate" ref="reserveCalendar"></reserveCalendar>
      </el-col>
    </el-row>
    <dialogPatient v-model="dialogPatient" :name="patientName"></dialogPatient>
  </section>
</template>
<script>
export default {
  filters: {
    curDateStr(value) {
      let yue = value.getMonth() + 1;
      if (yue < 10) yue = `0` + yue;
      return `${value.getFullYear()}-${yue}`;
    },
  },
  components: {
    dialogPatient: () => import("./_com/dialogPatient.vue"),
    reserveCalendar: () => import("@/pages/_com/reserveCalendar.vue"),
    deptSearch: () => import("@/pages/_com/deptSearch.vue"),
    doctorSearch: () => import("@/pages/_com/doctorSearch.vue"),
  },
  data() {
    return {
      dialogPatient: false,
      curyyDate: new Date(),
      patientName: "",
      form: {
        deptId: "",
        doctorId: "",
        doctorName: "",
        deptName: "",
      },
      paibanForm: {
        hpId: "",
        deptId: "",
        doctorId: "",
        startDate: "",
        type: 1,
        days: 7,
      },
      paiBanObj: {
        weekArray: [],
        tableList: [],
      },
      //统计信息
      registerCount: {},
      weekArray: ["一", "二", "三", "四", "五", "六", "日"],
    };
  },
  created() {
    let th = this;
    //查询是否医生
    // th.$api.getDoctorByToken().then(res => {
    //   if (res.executed) {
    //      th.form.doctorId = res.info.id;
    //      th.form.doctorName = res.info.trueName;
    //   }
    // });
    th.getRegisterCount();
  },
  methods: {
    onToUrl(url, type) {
      const th = this;
      if (th.verifyUrl(url)) {
        if (type == 0) {
          th.$router.push({
            path: url,
            query: {
              tabIndex: "1",
            },
          });
          th.addNavMenu("预约", url);
        } else {
          th.$router.push({
            path: url,
            query: {
              tabIndex: "2",
            },
          });
          th.addNavMenu("现场登记", url);
        }
      }
    },
    onOpenPatient() {
      let th = this;
      th.dialogPatient = true;
    },
    //获取统计
    getRegisterCount() {
      let th = this;
      let j = {
        hpId: th.adminUser.hpId,
        doctorId: th.form.doctorId,
        deptId: th.form.deptId,
      };
      th.$api.getRegisterCount(j).then((res) => {
        if (res.executed) {
          th.registerCount = res.dataBody;
        }
      });
    },
    //切换上下周（排班）
    onStepWeek(type) {
      let th = this;
      if (th.paiBanObj.weekArray.length == 0) return;
      let date = new Date(th.paiBanObj.weekArray[0].intactDateDay);
      if (type == 0) {
        //up
        date.setDate(date.getDate() - 7);
      } else {
        date.setDate(date.getDate() + 7);
      }
      th.paibanForm.startDate = th.$utils.FormatTime(
        "yyyy-MM-dd",
        date.getTime()
      );
      if (th.validateForm()) return;
      th.getDoctorJob();
    },
    //验证科室医生
    validateForm() {
      let th = this;
      let bo = false;
      if (!th.form.deptId) {
        th.$message.warning("请选择科室");
        bo = true;
        return bo;
      }
      if (!th.form.doctorId) {
        th.$message.warning("请选择医生");
        bo = true;
        return bo;
      }
      return bo;
    },
    //根据医生科室检索
    onSearchDoctor() {
      let th = this;
      if (th.validateForm()) return;
      //还原初始数据
      th.paibanForm.startDate = "";
      th.$refs["reserveCalendar"].getData();
      th.getDoctorJob();
      th.getRegisterCount();
    },
    //获取医生排班信息
    getDoctorJob() {
      let th = this;
      th.paibanForm.hpId = th.adminUser.hpId;
      th.paibanForm.deptId = th.form.deptId;
      th.paibanForm.doctorId = th.form.doctorId;
      //查询排班
      th.$api.scheduleList(th.paibanForm).then((res) => {
        if (res.executed) {
          th.paiBanObj.tableList = res.dataBody.doctorScheduleInfos.list;
          th.paiBanObj.weekArray = res.dataBody.daysInfos;
        }
      });
    },
    //医生的预约信息
    onStepMonth(type) {
      let th = this;
      let date = new Date(th.curyyDate);
      if (type == 0) {
        //up
        date.setMonth(date.getMonth() - 1);
      } else {
        date.setMonth(date.getMonth() + 1);
      }
      th.curyyDate = date;
      th.$nextTick(function () {
        th.$refs["reserveCalendar"].getData();
      });
    },
    //科室改变
    onChangeDept() {
      let th = this;
      th.form.doctorId = "";
      th.$nextTick(function () {
        th.$refs["doctorSearch"].getData();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.flex-header {
  display: flex;
  align-items: center;
  > div:nth-child(1) {
    flex-shrink: 0;
  }
  > div:nth-child(2) {
    flex-grow: 1;
    margin-left: 20px;
  }
}
.left-statistics {
  display: flex;
  width: 700px;
  color: white;
  > div {
    flex: 1;
    background-color: #41b2a6;
    height: 160px;
    border-radius: 5px;
    overflow: hidden;
    &:nth-child(2) {
      margin-left: 20px;
    }
  }
}
</style>